<template>
  <view class="content">
    <view class="up-top" :style="{backgroundImage: 'url(' + bgImage +')'}">
      <view class="head">
        <image :src="grade.href" class="img"></image>
        <view>{{grade.nickName}}</view>
      </view>
      <view class="body">
        <view class="text1">
          {{grade.rankName}}
        </view>
        <view>{{grade.date}}</view>
      </view>
      <view class="footer" v-if="grade.companyName">
        {{grade.companyName}}
      </view>
    </view>
    <view class="up-type">
      <view class="type-box" v-for="item in gradeInfo" :key="item.id" :class="{active: item.id == curGrade}" @click="changeGrade(item)">
        <view class="box-tit">
          {{item.name}}
        </view>
        <view class="box-price" :class="{gray: item.id < curGrade}">
          <text>¥</text><text class="text2">{{item.price}}</text>
        </view>
        <view class="box-text">
          {{item.date}}
        </view>
      </view>
    </view>
    <view class="h20"></view>
    <view class="up-list">
      <view class="list-box">
        <view class="list">开通时限</view>
        <view class="list right">{{chooseInfo.rankName}}</view>
      </view>
      <view class="list-box">
        <view class="list">会员等级</view>
        <view class="list right">{{chooseInfo.vipExpireDate}}</view>
      </view>
      <view class="agree" @tap="isAgree">
        <radio :value="isCheck" :checked="isCheck == '1'" class="agree-radio" color="#434343"/>
        <text class="agree-text-1">我已阅读并同意<text class="agree-text-2">《登录注册协议》</text></text>
      </view>
    </view>
    <view class="up-footer">
      <button type="primary" class="sub-btn yellow" :class="{miniBtn: curGrade != 4}" plain="true" @click="updatePage">上传凭证</button>
      <button type="primary" class="miniBtn block" plain="true" v-if="curGrade != 4" @click="toPay">线上支付</button>
    </view>
  </view>
</template>

<script>
import {upgrade, upgradeAmount} from "@/service/upgrade/upgrade.service.js"
import {findResult} from '@/service/join/join.service.js'
export default {
  data() {
    return {
      bgImage: this.$store.state.imgBaseUrl + '/upgrade-bg.png',
      curGrade: 1,
      isCheck: '1',
      userInfo: '',
      grade: {
        href: '',
        nickName: '',
        date: '',
        rankName: '',
        companyName: ''
      },
      chooseInfo: {
        rankName: '',
        vipExpireDate: ''
      },
      gradeInfo: [
        // {id: 2, name: '商户', price: 4000, date: '一年有效期'},
        {id: 3, name: '合伙人商户', price: '', date: '终身有效'},
        {id: 4, name: '大掌柜', price: '', date: '终身有效'}
      ],
      getUserComposeInfo: '',
      status: ''
    };
  },
  onLoad(option) {
    this.status = option.status;
  },
  mounted() {
    this.getUpgradeAmount()
  },
  onShow() {
    findResult({}, res => {
      if (res.status == 0) {
        if (res.data.status != 1 && !this.status) {
          uni.showToast({
            title: '已提交申请',
            icon: 'none',
            duration: 2000,
            success: () => {
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/upgrade/result'
                })
              }, 1000);
            }
          });
        }
      }
    })
    this.userInfo = uni.getStorageSync('gradeUserInfo');
    this.grade.href = this.userInfo.href;
    this.grade.nickName = this.userInfo.nickName;
    this.grade.rankName = this.userInfo.rank == 1 ? '免费商户' : this.userInfo.rank == 2 ? '商户' : '合伙人商户';
    this.grade.date = this.userInfo.vipExpireDate ? '有效期至 ' + this.userInfo.vipExpireDate : '终身有效';
    // this.curGrade = this.userInfo.rank == 2 ? 2 : 4;
    this.curGrade = this.userInfo.rank == 1 ? 3 : 4;
    this.drawCurGradeInfo();
  },
  methods: {
    getUpgradeAmount () {
      upgradeAmount({}, res => {
        if (res.status == 0) {
          this.grade.companyName = res.data.companyName;
          // this.gradeInfo[0].price = res.data.v2;
          this.gradeInfo[0].price = res.data.v3;
          this.gradeInfo[1].price = res.data.v4;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    drawCurGradeInfo() {
      this.gradeInfo.forEach((item) => {
        if (item.id == this.curGrade) {
          this.chooseInfo.rankName = item.name;
          this.chooseInfo.vipExpireDate = item.date;
        }
      })
    },
    changeGrade (item) {
      if (this.userInfo.rank == 1 || this.userInfo.rank == 2) {
        this.curGrade = item.id;
        this.drawCurGradeInfo();
      }
    },
    isAgree () {
      this.isCheck = this.isCheck == '0' ? '1' : '0'
    },
    updatePage () {
      if (this.isCheck == '0') {
        uni.showToast({
          title: '请先同意协议',
          icon: 'none'
        });
        return false
      }
      uni.navigateTo({
        url: '/pages/upgrade/updateCertificate?rank=' + this.curGrade
      })
    },
    toPay () {
      if (this.isCheck == '0') {
        uni.showToast({
          title: '请先同意协议',
          icon: 'none'
        });
        return false
      }
      let params = {
        rank: this.curGrade, // 加盟等级
        appliedType: 2, // 申请类型(1名额添加，2付费加盟，3代上传)
        onlinePay: 1
      }
      upgrade(params, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          uni.removeStorage({ // 清除缓存
            key: 'gradeUserInfo',
            success: function () {
              // 打开支付页面
              location.href = res.data.onlinePayUrl;
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.h20 {
  height: 20rpx;
  background-color: #FAFAFA;
}
.content {
  height: 100vh;
  background-color: #FFFFFF;
  font-family: PingFang SC;
  .up-top {
    height: 390rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .head {
      padding: 38rpx 67rpx 0;
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(255,255,255,1);
      display: flex;
      align-items: center;
      .img {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }
    }
    .body {
      text-align: center;
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFFFF;
      .text1 {
        font-size: 44rpx;
        font-weight: bold;
        margin-bottom: 28rpx;
      }
    }
    .footer {
      width: 100%;
      padding:  23rpx 33rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #FFFFFF;
      border-top: 1px solid #867C95;
      position: absolute;
      bottom: 0;
    }
  }
  .up-type {
    padding: 89rpx 50rpx 80rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .type-box {
      width: 164rpx;
      height: 164rpx;
      border: 1px solid #E1E1E1;
      border-radius: 10rpx;
      padding: 40rpx 20rpx;
      text-align: center;
      .box-tit {
        color: #636363;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 44rpx;
      }
      .box-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #C2AC78;
        &.gray {
          color: #9D9D9D;
        }
        .text2 {
          font-size: 46rpx;
        }
      }
      .box-text {
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
      &.active {
        border-color: #C2AC78;
        background-color: rgba(243,207,121,0.1);
      }
    }
  }
  .up-list {
    padding-left: 32rpx;
    padding-bottom: 70rpx;
    background-color: #FFFFFF;
    .list-box {
      padding: 30rpx 51rpx;
      border-bottom: 1px solid #E1E1E1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .list {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        &.right {
          color: #666666;
          margin-left: 45rpx;
        }
      }
    }
    .agree {
      margin: 26rpx 32rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #999999;
      font-size: 24rpx;
      .agree-radio {
        .uni-radio-input {
          width: 100%;
          height: 100%;
          color: #F6DA99;
        }
      }
      .agree-text-1 {
        margin-left: 22rpx;
        color: #999999;
      }
      .agree-text-2 {
        color: #C2AC78;
      }
     /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
        content: '\EA08';
        color: #F6DA99;
      }
    }
  }
  .up-footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      border: none;
      &.sub-btn {
        width: 100%;
      }
      &.miniBtn {
        width: 320rpx;
      }
      &.yellow {
        color: #434343;
        background-color: #F6DA99;
      }
      &.block {
        background-color: #434343;
        color: #F6DA99;
      }
    }
  }
}

</style>
